import { Col, Collapse, Row } from "antd";
import cls from "classnames";
import { Fragment } from "react";
import { SubTitle } from "../SubTitle";
import { renderFormItem } from "./components/form";
import Style from "./index.module.less";
const { Panel } = Collapse;
export function render2Column(columns) {
    const [item1, item2] = columns;
    return {
        renderBlock: () => (<Row gutter={14}>
        <Col span={12}>
          {renderFormItem(item1, 0)}
        </Col>
        <Col span={12}>
          {renderFormItem(item2, 0)}
        </Col>
      </Row>)
    };
}
/**
 * @param collapseAble 需要配置commonForm的collapseAble为true
*/
export function withTitle({ column, params }) {
    const { collapseAble, key, title } = params;
    return {
        renderBlock: () => {
            const node = column.map((el, key) => renderFormItem(el, key));
            return (<>
          {collapseAble
                    ? (<Panel className={Style.with_title} key={key} header={<SubTitle {...title} className={cls(Style.title, title.className)}/>}>
                <div>
                  {node}
                </div>
              </Panel>)
                    : (<Fragment key={key}>
                {title && <SubTitle {...title} className={cls(Style.title, title.className)}/>}
                {node}
              </Fragment>)}
        </>);
        }
    };
}
export const render2ColumnWithCollapse = (params) => withTitle({
    column: params.columns.map((el) => render2Column(el)),
    params: params.params
});
